<template>
  <div>
    <bread-crumb></bread-crumb>
    <el-card class="mt">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-input
            placeholder="请输入运单号"
            v-model="params.waybillNo"
          ></el-input>
        </el-col>
        <el-col :span="6"
          ><el-input
            placeholder="请输入客户名称"
            v-model="params.name"
          ></el-input
        ></el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="choseDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker
        ></el-col>
        <el-col :span="6" class="tr">
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mt">
      <el-radio-group v-model="params.status" @change="loadData">
        <el-radio-button label="1">全部运单</el-radio-button>
        <el-radio-button label="2">装货中</el-radio-button>
        <el-radio-button label="3">运输中</el-radio-button>
        <el-radio-button label="4">已完成</el-radio-button>
        <el-radio-button label="5">运单异常</el-radio-button>
      </el-radio-group>
    </el-card>
    <el-card class="mt">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="no" label="运单号"></el-table-column>
        <el-table-column prop="date" label="下单时间"></el-table-column>
        <el-table-column prop="name" label="客户名称"></el-table-column>
        <el-table-column prop="cargo" label="货物名称"></el-table-column>
        <el-table-column prop="count" label="件数"></el-table-column>
        <el-table-column prop="start" label="起始地"></el-table-column>
        <el-table-column prop="end" label="目的地"></el-table-column>
        <el-table-column prop="price" label="运费"></el-table-column>
        <el-table-column prop="needRecive" label="需要接货"></el-table-column>
        <el-table-column prop="plateNumber" label="车牌号"></el-table-column>
        <el-table-column prop="driver" label="司机"></el-table-column>
        <el-table-column prop="tel" label="司机电话"></el-table-column>
        <el-table-column prop="percent" label="运输进度">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.percent"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="detail(scope.row.no)"
              >详情</el-button
            >
            <el-button size="mini" type="danger">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import BreadCrumb from "@/components/BreadCrumb.vue";
import { post } from "@/utils/http";
import { mapMutations } from "vuex";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      tableData: [], // 存储来自于服务器的运单列表数据
      choseDate: [], // 存储筛选日期
      loading: false, // 表面数据停止加载
      // 发送至服务器的查询参数
      params: {
        waybillNo: "",
        name: "",
        startDate: "",
        endDate: "",
        status: "1",
      },
      // 分页信息
      pageData: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  // 生命周期钩子函数，当组件实例被创建之后，立即被调用,进行加载数据
  created() {
    this.loadData();
  },
  methods: {
    ...mapMutations(["changeIsFromDetail"]),
    // 获取数据的方法
    async loadData() {
      this.loading = true; // 开始加载数据
      this.params.startDate = this.choseDate[0] ? this.choseDate[0] : "";
      this.params.endDate = this.choseDate[1] ? this.choseDate[1] : "";
      //发送请求到/waybillList接口
      const res = await post("/waybillList", {
        // 发送请求时携带的参数
        ...this.pageData,
        ...this.params,
      });
      console.log(res);
      // 将从接口获取到的数据赋值tableData
      this.tableData = res.data.list;
      this.loading = false; // 停止加载数据
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
  min-width: 150px;
}
</style>
